<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>
         QuickSee CPU Usage API
      </title>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
         google.load('visualization', '1', {packages: ['gauge']});
      </script>
      <script type="text/javascript">



	var queryDict = {}
	location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})


         var query1, visualization1;

         function initialize() {
            visualization1 = new google.visualization.Gauge(document.getElementById('visualization1'));
            query1 = new google.visualization.Query('http://127.0.0.1/python/snmp/cpu_usage2.py?host=HOST'.replace("HOST",queryDict['host_ip']), {sendMethod:'scriptInjection'});
            query1.setRefreshable(true);
            query1.setRefreshInterval(2);
            query1.send(drawVisualization1);
            print(new Date() + " Monitoring System " + queryDict['host_ip'] + "<br>");

         }

	    var options = {
            width: 800, height: 200,
            redFrom: 90, redTo: 100,
            yellowFrom:75, yellowTo: 90,
            minorTicks: 5
        };

        function httpGet(theUrl)
        {
            var xmlHttp = null;

            xmlHttp = new XMLHttpRequest();
            xmlHttp.open( "GET", theUrl, false );
            xmlHttp.send( null );
            return xmlHttp.responseText;
        }

        var prev_cpus = 0;
        var curr_cpus = 0;
        var hostname;
        var hotpluged;
        var data_array;
        var threshold = 50;

         function drawVisualization1(response) {
            if (response.isError()) {
               alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
               return;
            }
            if (typeof(hostname) === "undefined" || hostname === null) {
                hostname = httpGet("http://127.0.0.1/python/snmp/hostname.py?host=HOST".replace("HOST",queryDict['host_ip']));
                if(hostname !== "None") {
                    print(new Date() + "<font size=4><b> Activated hostname:" + hostname + "</b></font><br>");
                }
                else {
                    hostname = null;
                }
            }

            curr_cpus = response.getDataTable().getNumberOfRows();

            if (curr_cpus > 0 && hostname !== null && (typeof(hotpluged) === "undefined" || hotpluged === null) ) {
            var hotplug = true;
                for (var i =0; i < curr_cpus; i++) {
                    var data = response.getDataTable().getFormattedValue(i,1);
                    var intData = parseInt(data);
                    if ( intData < threshold ) {
                        hotplug = false;
                    }
                }
                if (hotplug == true) {
                    print(new Date() + " vCPU Hotplug is needed <br>");
                    hotpluged = true;
                }

            }

            if (curr_cpus > prev_cpus) {
                print(new Date() + "<font size=4><b> Current Number of CPUs: " + curr_cpus +" cores</b></font><br>");
                prev_cpus = curr_cpus;
            }
            visualization1.draw(response.getDataTable(), options);
         }

         google.setOnLoadCallback(initialize);
      </script>


   </head>
   <body>
<form name="input" action="" >
IP: <input type="text" name="host_ip" value="Monitoring IP" id="host_ip" />
<script>
        document.getElementById("host_ip").defaultValue = queryDict["host_ip"];
</script>
<input type="submit" value="Submit">
</form>
<table>
<tr>
<td>
      <div>
         <div id="visualization1" style="height: 200px; width: 700px; border: 0px solid; float: left;" />
      </div>
</td>
</tr>
<tr>
<td>
<div id="log"></div>
</td>
</tr>
</table>
<script type="text/javascript">
function print(value) {
    document.getElementById('log').innerHTML += value;
}

</script>
   </body>
</html>
